import '@animxyz/core';
import { useRef, useState } from 'react';
import 'swiper/css';
import 'swiper/css/effect-cube';
import { Autoplay, EffectCoverflow, EffectCube } from 'swiper/modules';
import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';

import Bg from '@/assets/choise-bg.jpg';
import Hand from '@/assets/hand-1.png';
import ConfirmButton from '@/assets/introduce-1.png';
import ZhuDiBus from '@/assets/introduce-11.png';
import ZhuDiHeader from '@/assets/introduce-12.png';
import ZhuDiTitle from '@/assets/introduce-8.png';
import ZhuDiProduct from '@/assets/introduce-9.png';

import NikeBus from '@/assets/introduce-4.png';
import NikeProduct from '@/assets/introduce-5.png';
import NikeTitle from '@/assets/introduce-6.png';
import NikeHeader from '@/assets/introduce-7.png';

import CloseIcon from '@/assets/introduce-2.png';
import PreviewImage from '@/assets/introduce-3.png';

import '@animxyz/core';
import { XyzTransitionGroup } from '@animxyz/react';

import TweenOne from 'rc-tween-one';
import { Overlay } from 'react-vant';
import { history } from 'umi';

export function HandIcon() {
  return (
    <TweenOne
      animation={{
        type: 'from',
        yoyo: true,
        repeat: -1,
        opacity: 0.5,
      }}
      className="w-[244px] h-[52px] bg-cover absolute left-1/2 top-8"
      style={{
        backgroundImage: `url(${Hand})`,
      }}
    />
  );
}

export default function Page() {
  const [showOverlay, setShowOverlay] = useState<boolean>(false);
  const swiperRef = useRef<SwiperClass>();
  const [activeIndex, setActiveIndex] = useState<number>(0);

  return (
    <>
      <Swiper
        preventClicksPropagation={false}
        preventClicks={false}
        speed={1000}
        className="relative overflow-hidden"
        modules={[EffectCube, EffectCoverflow, Autoplay]}
        effect="coverflow"
        onSlideChange={() => {
          setActiveIndex(swiperRef.current?.activeIndex || 0);
        }}
        onSwiper={(swiper) => (swiperRef.current = swiper)}
      >
        <SwiperSlide
          className="h-screen min-h-screen bg-no-repeat bg-top bg-cover pt-[230px] px-4 overflow-hidden"
          style={{
            backgroundImage: `url(${Bg})`,
          }}
        >
          <XyzTransitionGroup appear appearVisible xyz="fade up-2 stagger">
            {/* zhudi */}
            {activeIndex === 0 && (
              <i
                className=" w-full h-full absolute left-0  top-0 bg-no-repeat"
                style={{
                  backgroundSize: '100% auto',
                  backgroundImage: `url(${ZhuDiHeader})`,
                }}
              />
            )}

            {activeIndex === 0 && (
              <h2
                className="w-[544px] h-[232px] bg-cover  relative"
                style={{ backgroundImage: `url(${ZhuDiTitle})` }}
              />
            )}

            {activeIndex === 0 && (
              <p
                className="w-[458px] h-[144px] bg-cover mx-auto mt-4"
                style={{
                  backgroundImage: `url(${ZhuDiProduct})`,
                }}
              />
            )}

            {activeIndex === 0 && (
              <div
                xyz="fade right-2 stagger"
                onClick={() => {
                  swiperRef.current?.autoplay.pause();
                  setShowOverlay(true);
                }}
                className="w-[718px] h-[218px] relative bg-cover mt-[150px] -ml-[14px]"
                style={{
                  backgroundImage: `url(${ZhuDiBus})`,
                }}
              >
                <HandIcon />
              </div>
            )}
          </XyzTransitionGroup>
        </SwiperSlide>
        <SwiperSlide
          className="h-screen min-h-screen bg-no-repeat bg-top bg-cover pt-[230px] px-4 overflow-hidden"
          style={{
            backgroundImage: `url(${Bg})`,
          }}
        >
          <XyzTransitionGroup appear appearVisible xyz="fade up-2 stagger">
            {/* nick */}
            {activeIndex === 1 && (
              <i
                className=" w-full h-full absolute left-0  top-0 bg-no-repeat"
                style={{
                  backgroundSize: '100% auto',
                  backgroundImage: `url(${NikeHeader})`,
                }}
              />
            )}

            {activeIndex === 1 && (
              <h2
                className="w-[540px] h-[230px] bg-cover  relative"
                style={{ backgroundImage: `url(${NikeTitle})` }}
              />
            )}

            {activeIndex === 1 && (
              <p
                className="w-[458px] h-[144px] bg-cover mx-auto mt-4"
                style={{
                  backgroundImage: `url(${NikeProduct})`,
                }}
              />
            )}

            {activeIndex === 1 && (
              <div
                xyz="fade right-2 stagger"
                onClick={() => {
                  swiperRef.current?.autoplay.pause();
                  setShowOverlay(true);
                }}
                className="w-[718px] h-[218px] relative bg-cover mt-[150px] -ml-[14px] "
                style={{
                  backgroundImage: `url(${NikeBus})`,
                }}
              >
                <HandIcon />
              </div>
            )}
          </XyzTransitionGroup>
        </SwiperSlide>
      </Swiper>

      <p className=" text-xs text-center text-white z-10 absolute left-0 right-0 bottom-24">
        左右滑动屏幕切换大巴
      </p>
      <button
        onClick={() => history.push('/choise')}
        className=" w-[274px] -ml-[calc(274px/2)] h-[96px] bg-cover active:scale-95 absolute left-1/2 bottom-8 z-10"
        style={{
          backgroundImage: `url(${ConfirmButton})`,
        }}
      />

      <Overlay
        style={{
          '--rv-overlay-background-color': 'transparent',
        }}
        visible={showOverlay}
        className=" pt-[600px]"
        onClick={() => {
          swiperRef.current?.autoplay.start();
          setShowOverlay(false);
        }}
      >
        <div className="relative w-[702px] h-[478px] mx-auto">
          <i
            onClick={() => {
              swiperRef.current?.autoplay.start();
              setShowOverlay(false);
            }}
            className="w-[42px] h-[42px] bg-cover absolute left-2 top-2"
            style={{
              backgroundImage: `url(${CloseIcon})`,
            }}
          ></i>
          <img className=" block w-full h-full " src={PreviewImage} alt="" />
        </div>
      </Overlay>
    </>
  );
}
